<template>
    <el-card class="blogger-info">
        <el-row class="blogger-avatar" type="flex" justify="center" align="middle" style="margin-top: 20px;">
            <el-avatar :size="100" :src="bloggerInfo.avatar" />
        </el-row>
        <el-row class="blogger-name"  type="flex" justify="center" align="middle" style="margin-top: 20px;">
            <span>{{bloggerInfo.bloggerName}}</span>
        </el-row>
        <el-row class="blogger-description"  type="flex" justify="center" align="middle" style="margin-top: 20px;">
            <span>{{ bloggerInfo.description }}</span>
        </el-row>             
        <el-row class="blog-counts"  type="flex" justify="center" align="middle" style="margin-top: 20px;font-size: 20px;">
            <el-col :span="6" >

                <el-row type="flex" justify="center" align="middle">{{bloggerInfo.postNum}}</el-row>
                <el-row type="flex" justify="center" align="middle">文章</el-row>

            </el-col>
            <el-col :span="6" >
              <router-link class="blogger-category" :to="{path:'/category'}">
                <el-row type="flex" justify="center" align="middle">{{ bloggerInfo.postCategoryNum }}</el-row>
                <el-row type="flex" justify="center" align="middle">分类</el-row>
              </router-link>
            </el-col>
            <el-col :span="6" >
              <router-link class="blogger-tags" :to="{path:'/tags'}">
                <el-row type="flex" justify="center" align="middle">{{ bloggerInfo.postTagNum }}</el-row>
                <el-row type="flex" justify="center" align="middle">标签</el-row>
              </router-link>
            </el-col>
            <el-col :span="6" >
                <el-row type="flex" justify="center" align="middle">00</el-row>
                <el-row type="flex" justify="center" align="middle">时间轴</el-row>
            </el-col>
        </el-row>
        <el-row class="social-medias"  type="flex" justify="center" align="middle" style="margin-top: 20px;">
            <el-tooltip content="GitHub" placement="top">
              <a :href="bloggerInfo.societies.github"  target="_blank" ><GithubM  class="icon"/></a>
            </el-tooltip>
          <el-tooltip content="码云" placement="top">
            <a :href="bloggerInfo.societies.gitee"  target="_blank" ><Gitee  class="icon"/></a>
          </el-tooltip>
          <el-tooltip content="BiliBili" placement="top">
            <a :href="bloggerInfo.societies.bilibili" target="_blank" ><BiliBili  class="icon"/></a>
          </el-tooltip>
          <el-tooltip content="知乎" placement="top">
            <a :href="bloggerInfo.societies.zhihui" target="_blank" ><Zhihu  class="icon"/></a>
          </el-tooltip>
          <el-tooltip content="微博" placement="top">
            <a :href="bloggerInfo.societies.weibo" target="_blank" ><Weibo  class="icon"/></a>
          </el-tooltip>
          <el-tooltip content="QQ" placement="top">
            <a :href="bloggerInfo.societies.qq" target="_blank" ><QQ  class="icon"/></a>
          </el-tooltip>
          <el-tooltip content="QQ空间" placement="top">
            <a :href="bloggerInfo.societies.qzone" target="_blank" ><Qzone  class="icon"/></a>
          </el-tooltip>
          <el-tooltip content="Gmail" placement="top">
            <a :href="bloggerInfo.societies.gmail" target="_blank" ><Gmail  class="icon"/></a>
          </el-tooltip>
          <el-tooltip content="Steam" placement="top">
            <a :href="bloggerInfo.societies.steam" target="_blank" ><Steam  class="icon"/></a>
          </el-tooltip>
          <el-tooltip content="Telegram" placement="top">
            <a :href="bloggerInfo.societies.telegram" target="_blank" ><Telegram  class="icon"/></a>
          </el-tooltip>
          <el-tooltip content="推特" placement="top">
            <a :href="bloggerInfo.societies.x" target="_blank" class="social-media"><X  class="icon"/></a>
          </el-tooltip>
        </el-row>
    </el-card>
</template>

<script lang="ts" setup>
import {GithubM,BiliBili,Gitee,Gmail,QQ,Qzone,Steam,Telegram,Weibo,X,Zhihu} from '@/components/icons'
import { bloggerInfo } from '@/store/customer/inedx'
</script>

<style scoped>
.blogger-info {
    width: 330px;
}
.blogger-name{
    font-size: 22px;
}
.icon{
    width: 32px;
    height: 32px;
}
.social-medias a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33px;
    height: 33px;
    background-color: transparent;
    transition: transform .18s ease-out .18s; /* 动画 */
}
.social-medias a:hover {
    transform: scale(1.2); /* （150% 缩放 - 注意：如果缩放太大，它会超出视口） */
  }
.blogger-tags,.blogger-category{
  color:black;
}
.blogger-tags:hover,.blogger-category:hover{
  background-color: white;
  color:#3eaf7c;
}
</style>